<template>
  <div>
    <div class="top">
      <van-nav-bar
        title="小区管理"
        left-text="返回"
        right-text=""
        left-arrow
        @click-left="() => this.$router.go(-1)"
      />
    </div>

    <div class="body">
      <van-form>
        <van-field label="所属街道、镇">
          <template #input>
            <span>新城路街道</span>
          </template>
        </van-field>
        <van-field label="物业">
          <template #input>
            <span> 上海家臣物业管理有限公司</span>
          </template>
        </van-field>

        <van-field
          readonly
          clickable
          :value="value"
          label="选择小区"
          placeholder="点击选择城市"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
        <van-field  label="服务小区">
          <template #input>
            <van-checkbox v-model="checkbox" shape="square"
              >嘉华山庄</van-checkbox
            >
          </template>
        </van-field>
        <van-field>
          <template #input>
            <van-button block type="primary" native-type="submit">
              确定
            </van-button>
          </template>
        </van-field>
      </van-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checkbox: "",
      value: "",
      columns: ["杭州", "宁波", "温州", "嘉兴", "湖州"],
      showPicker: false,
    };
  },
  methods: {
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
  },
};
</script>
<style lang="scss" scoped></style>
